<template>
  <div class="reportLeft item-space">
    <div class="wholeTitle">{{route.meta.title}}</div>
    <div class="content">
      <el-scrollbar height="700">
        <el-menu
            v-if="menuList?.length>0"
            default-expand-all
            :default-active="activeId"
            :default-openeds="defaultLeftOpends"
            style="height: 100%;"
            class="el-menu-vertical-demo"
        >
          <rp-menu-item :menuList="menuList"></rp-menu-item>
        </el-menu>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
//组件
//接口

//api


import {reactive, ref} from 'vue';
import type {rpDirDataType} from "@/api/reportCom/type";
import RpMenuItem from "@/components/treeLeftItem/rpleftMenuItem.vue";
import useReportStore from "@/store/modules/report/report";
import {useRoute} from "vue-router";
//data
let props = defineProps<{
  menuList: rpDirDataType[],
  activeId:string,
  defaultLeftOpends:string[]
}>()
let route = useRoute()
let reportStore = useReportStore()

/**************************接口函数**************************/


/**************************操作函数**************************/


</script>

<style lang="scss" scoped>
.reportLeft {
  width: 18%;
  margin-right: 24px;
  //:deep(.el-tree-node__expand-icon){
  //  display: none;
  //}
  //:deep(.el-tree-node__content>label.el-checkbox){
  //  display: none;
  //}
  .wholeTitle {
    padding: 15px 0 20px 20px;
    border-bottom: 1px solid #BBBBBB;
  }
}

.el-menu-vertical-demo {
  width: 100%;
  border: none;
}

.is-active {
  &::v-deep {
  }

}
</style>
